<template>
  <!-- 发货单 -->
  <div class="shipments">
    <!-- 顶部导航 -->
    <van-nav-bar title="商品订单" left-arrow @click-left="$router.go(-1)" />
    <!-- 搜索 -->
    <van-search
      v-model="searchValue"
      action-text="搜索"
      shape="round"
      show-action
      placeholder="关键字查询"
      @search="onSearch"
      @cancel="onCancel"
    />
    <!-- 标签页 -->
    <van-tabs
      v-model="active"
      color="#fc3"
      title-active-color="#039"
      line-width="52"
      title-inactive-color="#666"
    >
      <!-- 全部 -->
      <van-tab title="全部">
        <shipmentsAll :recordsAll="recordsAll" />

        <!-- 分页 -->
        <van-pagination
          v-show="recordsAllPagination.pages > 1"
          v-model="recordsAllPagination.current"
          :page-count="recordsAllPagination.pages"
          mode="multi"
          :show-page-size="0"
          @change="changeRecordsAll"
        />
      </van-tab>

      <!-- 待发货 -->
      <van-tab title="待发货">
        <waitShipments :waitShipments="waitShipments" />

        <!-- 分页 -->
        <van-pagination
          v-show="waitShipmentsPagination.pages > 1"
          v-model="waitShipmentsPagination.current"
          :page-count="waitShipmentsPagination.pages"
          mode="multi"
          :show-page-size="0"
          @change="changewaitGoods"
        />
      </van-tab>

      <!-- 待收货 -->
      <van-tab title="待收货">
        <waitReceiving :waitReceiving="waitReceiving" />

        <!-- 分页 -->
        <van-pagination
          v-show="waitReceivingPagination.pages > 1"
          v-model="waitReceivingPagination.current"
          :page-count="waitReceivingPagination.pages"
          mode="multi"
          :show-page-size="0"
          @change="changeWaitReceiving"
        />
      </van-tab>

      <!-- 待评价 -->
      <van-tab title="待评价">
        <whitEvaluate :whitEvaluate="whitEvaluate" />

        <!-- 分页 -->
        <van-pagination
          v-show="whitEvaluatePagination.pages > 1"
          v-model="whitEvaluatePagination.current"
          :page-count="whitEvaluatePagination.pages"
          mode="multi"
          :show-page-size="0"
          @change="changeWhitEvaluate"
        />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import {
  GetallOrdersData,
  GetwaitGoodsData,
  GetReceiveGoodsData,
  GetWhitEvaluateData,
} from "@/request/api";
import shipmentsAll from "@/components/ShipmentsAll";
import waitShipments from "@/components/waitShipments";
import waitReceiving from "@/components/waitReceiving";
import whitEvaluate from "@/components/whitEvaluate";

export default {
  data() {
    return {
      searchValue: "",
      active: 0,
      // 分页-全部
      recordsAllPagination: [],

      // 分页-待发货
      waitShipmentsPagination: [],

      // 分页-待收货
      waitReceivingPagination: [],

      // 分页-待评价
      whitEvaluatePagination: [],

      // 全部
      recordsAll: {},

      // 待发货
      waitShipments: [],

      // 待收货
      waitReceiving: [],

      // 待评价
      whitEvaluate: [],
    };
  },
  components: {
    shipmentsAll,
    waitShipments,
    waitReceiving,
    whitEvaluate,
  },
  created() {
    // 发送全部商品的请求
    GetallOrdersData({
      current: "1",
      size: "10",
      keyword: "",
    }).then((res) => {
      this.recordsAll = res.data.records;
      this.recordsAllPagination = res.data;
    });
    // 发送待发货请求
    GetwaitGoodsData({
      current: "1",
      size: "10",
      keyword: "",
    }).then((res) => {
      // console.log(res);
      this.waitShipments = res.data.records;
      this.waitShipmentsPagination = res.data;
    });

    // 发送待收货请求
    GetReceiveGoodsData({
      current: "1",
      size: "10",
      keyword: "",
    }).then((res) => {
      this.waitReceiving = res.data.records;
      this.waitReceivingPagination = res.data;
    });

    // 发送待评价请求
    GetWhitEvaluateData({
      current: "1",
      size: "10",
      keyword: "",
    }).then((res) => {
      this.whitEvaluate = res.data.records;
      this.whitEvaluatePagination = res.data;
      console.log(this.whitEvaluatePagination);
    });
  },
  methods: {
    onSearch(val) {
      console.log(val);
    },
    onCancel() {
      console.log(val);
    },
    // 分页按钮-全部
    changeRecordsAll() {
      GetallOrdersData({
        current: this.recordsAllPagination.current,
        size: "10",
        keyword: "",
      }).then((res) => {
        this.recordsAll = res.data.records;
      });
    },
    // 分页按钮-待发货
    changewaitGoods() {
      GetwaitGoodsData({
        current: this.waitShipmentsPagination.current,
        size: "10",
        keyword: "",
      }).then((res) => {
        // console.log(res);
        this.waitShipments = res.data.records;
      });
    },

    // 分页按钮-待收货
    changeWaitReceiving() {
      GetReceiveGoodsData({
        current: this.waitReceivingPagination.current,
        size: "10",
        keyword: "",
      }).then((res) => {
        this.waitReceiving = res.data.records;
      });
    },
    // 分页按钮-待评价
    changeWhitEvaluate() {
      GetWhitEvaluateData({
        current: this.whitEvaluatePagination.current,
        size: "10",
        keyword: "",
      }).then((res) => {
        this.whitEvaluate = res.data.records;
      });
    },
  },
};
</script>
 
<style lang = "less" scoped>
/* 顶部导航 */
.van-hairline--bottom {
  background-color: #003399;
}
/deep/.van-nav-bar__title,
/deep/.van-icon {
  color: #ffffff;
}

/* 标签页 */
.van-tab {
  font-size: 0.18rem;
}

.van-tabs__wrap {
  padding-bottom: 0.1rem;
}
</style>
